<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello WX</title>
    <meta
      name="viewport"
      content="width=device-width,
    initial-scale=1,maximum-scale=1, user-scalable=no,viewport-fit=contain"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <script src="../js//vconsole.min.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/flexible.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="../js/sm3.js"></script>
    <link rel="stylesheet" href="../css/mui.min.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <script src="../js/vue.js"></script>
    <script src="../wx/uap.js"></script>
    <!-- <script src="../js/jump.js"></script> -->
    <script src="../js/mui.min.js" defer></script>
    <script src="../js/flexible.js"></script>
    <script src="../js/jquery-3.6.0.min.js" defer></script>

    <script src="./text.js"></script>
    <style type="text/css">
      #list {
        /*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
        margin-top: -1px;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        font-size: 50px;
      }

      /* #app {
        width: 100%;
        height: 0;
      } */

      .mui-content .bgcDiv {
        /* background-color: rgb(0, 150, 255); */
        /* padding: 0.9rem 0.5rem 0.9rem; */
        box-sizing: border-box;
        background: url("../image/bgc.png") no-repeat center;
        background-size: 100% 100%;
        height: 4.8rem;
        width: 100%;
      }

      /* .mui-content {
        
      } */
      .content {
        height: 100%;
        background-color: #efeff4;
      }
      .functionsifs {
        width: 100%;
        margin-top: -0.7rem;
        padding: 0 0.33rem 0.2rem;
        /* overflow: scroll; */
        /* height: calc(100vh - 5.3rem); */
      }

      .functionsif {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }

      .functionsif .single {
        margin: 0.2rem 0.1rem;
        display: inline-block;
        width: 1.9rem;
        height: 1.9rem;
        background: rgb(255, 255, 255);
        padding: 0.23rem 0.1rem 0;
        border-radius: 0.2rem;
        text-align: center;
        /* box-shadow: 2px 4px 2px #ccc; */
      }

      .imgSrc {
        width: 0.9rem;
      }

      .name {
        font-size: 0.24rem;
      }

      .left {
        float: left;
      }

      .left .van-icon {
        font-size: 0.4rem;
      }

      .arrow {
        /* margin-top: -0.6rem; */
      }

      .idcard {
        font-size: 0.35rem;
        margin-top: 0.4rem;
        text-align: justify;
        padding: 0 0.3rem;
      }

      .idcard p {
        margin-bottom: 0.2rem;
      }

      .swiper-animate {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px;
        border: 4px solid #333;
        -webkit-animation: bounce-down 2s linear infinite;
        animation: bounce-down 2s linear infinite;
      }

      @-webkit-keyframes bounce-down {
        25% {
          -webkit-transform: translateY(0px);
        }

        50% {
          -webkit-transform: translateY(50%);
        }

        100% {
          -webkit-transform: translateY(100%);
        }
      }

      @keyframes bounce-down {
        25% {
          transform: translateY(100%);
        }

        50% {
          transform: translateY(50%);
        }

        100% {
          transform: translateY(0px);
        }
      }

      .swiper {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: #333;
        opacity: 0.7;
      }

      .right {
        position: fixed;
        bottom: 0px;
        left: 0px;
        padding: 0.2rem;
        background-color: #fff;
        width: 100%;
        box-shadow: 4px -4px 4px #eee;
        text-align: center;
      }

      .right .mui-btn-blue,
      .mui-btn-primary,
      input[type="submit"] {
        background-color: rgb(0, 170, 255);
        color: #fff;
        border: 1px solid rgb(0, 170, 255);
        border-radius: 10px;
      }

      .noteBookHome {
        background-color: rgb(0, 170, 255);
        padding: 0.2rem;
        color: #fff;
        text-align: justify;
        display: flex;
        justify-content: space-between;
      }

      .noteBookHome span:first-child {
        width: 20%;
      }

      .noteBookHome span:last-child {
        width: 60%;
      }

      .noteBookFoot {
        position: fixed;
        bottom: 0px;
        left: 0px;
        padding: 0.2rem;
        background-color: #fff;
        width: 100%;
        box-shadow: 4px -4px 4px #eee;
        text-align: center;
      }

      .noteBookFoot .mui-btn-blue,
      .mui-btn-primary,
      input[type="submit"] {
        background-color: rgb(0, 170, 255);
        color: #fff;
        border: 1px solid rgb(0, 170, 255);
        border-radius: 10px;
      }

      .mui-toast-container {
        top: 50%;
      }

      .noteBookHome span {
        font-size: 0.3rem;
      }

      .idcard p {
        font-size: 0.35rem;
      }

      .line {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 0.2rem;
      }

      .line1 {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100%;
        height: 0.2rem;
      }

      .lineFlag {
        display: none;
        width: 100%;
        -webkit-animation: bounce-down 2s linear infinite;
        animation: bounce-down 2s linear infinite;
      }

      ::-webkit-input-placeholder {
        color: black;
      }

      @-webkit-keyframes bounce-down {
        25% {
          -webkit-transform: translateY(0);
        }

        50% {
          -webkit-transform: translateY(1.5rem);
        }

        100% {
          -webkit-transform: translateY(3rem);
        }
      }

      @keyframes bounce-down {
        25% {
          transform: translateY(3rem);
        }

        50% {
          transform: translateY(1.5rem);
        }

        100% {
          transform: translateY(0);
        }
      }

      .mui-pull-left {
        color: #fff;
      }

      .Navigation {
        position: fixed;
        justify-content: space-around;
        bottom: 0;
        left: 0;
        background-color: #fff;
        width: 100%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: 0.15rem 0.4rem;
        display: flex;
      }

      .Navigation img {
        width: 0.4rem;
        height: 0.4rem;
      }

      .Navigation li:nth-last-child(2) img {
        width: 0.4rem;
      }

      .Navigation li p {
        font-size: 0.22rem;
      }

      .Navigation li {
        text-align: center;
        color: #8a9dbe;
        width: 1.2rem;
      }

      .active p {
        color: rgb(18, 118, 119);
        font-size: 0.25rem;
      }

      .mui-content .bgcDiv1 .bgc {
        background: url("../image/bianzu.png") center;
        background-size: 100% 100%;
        width: 70%;
        height: 90%;
        margin: 0 auto;
      }

      .mui-content .bgcDiv1 .bgc2 {
        background: url("../image/suishoupai.png") center;
        background-size: 100% 100%;
        width: 70%;
        height: 90%;
        margin: 0 auto;
      }

      .mui-content .bgcDiv1 {
        background-image: linear-gradient(
          to right,
          rgb(13, 121, 131),
          rgb(25, 179, 182)
        );
        height: 4.8rem;
        width: 100%;
        padding-top: 0.5rem;
      }

      .close {
        float: right;
        padding: 0.3rem;
        width: 2rem;
      }

      .close1 {
        float: right;
        width: 2rem;
        padding: 0.3rem;
        margin-top: -0.5rem;
      }

      .wode {
        position: relative;
        width: 100%;
        height: 100%;
        color: #f7faff;
      }

      .c img {
        position: absolute;
        top: 0;
        right: 0;
        width: 80%;
        padding: 0.5rem 0rem;
      }

      .d img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80%;
        margin-bottom: 1.5rem;
      }

      /* .content {
        height: 100%;
      } */

      .b {
        padding: 2rem 0.3rem 0;
        margin-top: 1rem;
      }

      .b img {
        position: absolute;
        right: 0;
        margin-right: 0.35rem;
        margin-top: 0.4rem;
        top: 0;
        width: 0.15rem;
      }

      .b .input {
        height: 1rem;
        border: none;
        box-shadow: 4px 4px 4px #eee;
        font-size: 0.3rem;
        line-height: 1rem;
        background: #fff;
        color: #333;
        padding-left: 0.3rem;
        margin-bottom: 0.3rem;
      }

      .b div {
        position: relative;
      }

      .a {
        padding: 1rem 0.3rem 0 0.3rem;
      }

      .a p {
        font-size: 0.4rem;
        color: #333;
        font-weight: bold;
        z-index: 1111;
        margin-bottom: 0.2rem;
      }

      .a p:last-child {
        font-size: 0.3rem;
        color: #8a9dbe;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="content" ref="content">
        <!-- 一拍录 -->
        <div class="mui-content" v-if="this.value == 0">
          <div class="bgcDiv1" @click="vconsoleClick(2)">
            <img
              src="../image/close.png"
              alt=""
              class="close1"
              @click="close"
            />
            <p class="bgc2"></p>
          </div>
          <div class="functionsifs">
            <div class="functionsif">
              <div
                class="single"
                v-for="(item, index) in ReadilyList"
                :key="index"
                @click="ReadilyBtn(index, item)"
              >
                <div class="imgDiv">
                  <img :src="item.imgSrc" alt="" class="imgSrc" />
                </div>
                <span class="name">{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 我的 -->
        <div v-if="this.value == 1" class="wode">
          <div class="wo">
            <div class="a">
              <p>{{getEmailName}}</p>
              <p v-if='getEmailID=="null"'></p>
              <p v-else>{{getEmailID}}</p>
            </div>

            <div class="b">
              <div>
                <p @click="zhuce" class="input">配置内网邮箱</p>
                <img src="../image/wode1.png" />
              </div>
              <!-- <div class="b_1">
                <p @click="usageClick" class="input">使用统计</p>
                <img src="../image/wode1.png" />
              </div> -->
              <div class="b_1">
                <p @click="about" class="input">关于</p>
                <img src="../image/wode1.png" />
              </div>
            </div>
            <div class="c">
              <img src="../image/wode.png" alt="" />
            </div>
            <div class="d">
              <img src="../image/wode3.png" alt="" />
            </div>
          </div>
        </div>
      </div>

      <ul class="Navigation uldisplay1">
        <li v-for="(item,index) in navList" :key="index">
          <div
            @click="navigation(index,item.name)"
            :class="{active:value==index}"
          >
            <img :src="item.imgSrc" alt="" id="myImages" />
            <p>{{item.name}}</p>
          </div>
        </li>
      </ul>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            value: 0,
            navList: [
              { name: "一拍录", imgSrc: "../image/camera2.png" },
              { name: "我的", imgSrc: "../image/mynav1.png" },
            ],

            // 一拍录
            ReadilyList: [
              {
                id: 1,
                name: "气体报告",
                imgSrc: "../image/shudian.png",
              },
              {
                id: 2,
                name: "色谱报告",
                imgSrc: "../image/weizhang.png",
              },
              {
                id: 3,
                name: "例行报告",
                imgSrc: "../image/biandian.png",
              },

              {
                id: 4,
                name: "识别历史",
                imgSrc: "../image/shibielishi.png",
              },
            ],
            isflageIOX: true,
            active: 0,

            show: false,
            addedPreviewFile: "",
            name: "",
            getEmailID: sessionStorage.getItem("toMail"),
            getEmailName: "",
            idx: 0,
            indx: 0,
          };
        },

        created() {
          let newUserName;
          let userNameString = sm2.doDecrypt(
            sessionStorage.getItem("userName"),
            sessionStorage.getItem("fprk"),
            1
          );
          let userNameList = userNameString.split(",");
          if (sm3(userNameList[0]) == userNameList[1]) {
            newUserName = userNameList[0];
            this.getEmailName = newUserName;
            if (isFlagOne) {
              this.getEmailName = noPassByName(this.getEmailName);
            } else {
              this.getEmailName = newUserName;
            }
          }
          this.navigation(0, "一拍录");
          var url = location.search; //获取url中"?"符后的字串 ('?modFlag=business&role=1')
          if (url.split("=")[1] == "flag") {
            this.value = 1;
            // 一拍录
            // this.navList[0].imgSrc = "../image/5.png";
            // this.navList[0].imgSrc = "../image/speech.png";

            // this.navList[0].imgSrc = "../image/speech.png";
            this.navList[0].imgSrc = "../image/camera1.png";
            this.navList[1].imgSrc = "../image/14.png";
          } else {
            this.value = 0;
            // this.getEmail();
            // 我的
            this.navList[0].imgSrc = "../image/camera2.png";
            this.navList[1].imgSrc = "../image/myour.png";
            // this.navList[0].imgSrc = "../image/5.png";
          }
        },
        mounted() {
          $("#myImage").css("width", "0.3rem");
          // this.compatibleInput();
        },
        methods: {
          // 点击20次展示vconsole 设置在text.js
          vconsoleClick(type) {
            if (type == 2) {
              this.idx = this.idx + 1;
              if (this.idx == 20) {
                this.idx = 0;
                sessionStorage.setItem("vconsoleFlag", "true");
                //显示 vConsole 的开关按钮。
                vconsole.showSwitch();
              }
            } else {
              this.indx = this.indx + 1;
              if (this.indx == 20) {
                this.indx = 0;
                sessionStorage.setItem("vconsoleFlag", "false");
                // 隐藏
                vconsole.hideSwitch();
              }
            }
          },
          // 底部导航切换
          navigation(index, name) {
            if (index == 0) {
              // 一拍录
              // this.navList[0].imgSrc = "../image/5.png";
              // this.navList[0].imgSrc = "../image/speech.png";
              this.value = index;
              this.navList[0].imgSrc = "../image/camera2.png";
              this.navList[1].imgSrc = "../image/myour.png";
            } else {
              // 我的
              // this.navList[0].imgSrc = "../image/5.png";
              // this.navList[0].imgSrc = "../image/speech.png";
              this.navList[0].imgSrc = "../image/camera1.png";
              this.navList[1].imgSrc = "../image/14.png";
              this.value = index;
            }
          },
          // 我的
          zhuce() {
            // document.getElementById("confirmBtn").addEventListener('tap', function() {
            if (this.getEmailID !== "null") {
              var btnArray = ["取消", "确定"];
              mui.confirm(
                "您已设置成功内网邮箱，确定要重置邮箱吗？",
                "消息提醒",
                btnArray,
                (e) => {
                  if (e.index == 1) {
                    $(location).attr("href", "zhu_ce.html");
                  }
                }
              );
            } else {
              $(location).attr("href", "zhu_ce.html");
            }

            // });
            // $(location).attr("href", "zhu_ce.html");
          },
          about() {
            addOperator(4, 1, "关于", 1, 1, "跳转页面");
            $(location).attr("href", "about.html");
          },
          // 使用统计
          usageClick() {
            // addOperator(4, 1, "关于", 1, 1, "跳转页面");
            $(location).attr("href", "usageStatistics.html");
          },
          close() {
            if (!isFlag) {
              closeIscp();
            }
            // WeixinJSBridge.call("closeWindow");
            IscLogout();
            wx.closeWindow();
          },
          // 一拍录
          ReadilyBtn(index, item) {
            if (item.id == 1) {
              // 现场违章行为
              // mui.toast("暂未开放！", { duration: "long", type: "div" });
              $(location).attr("href", "WorkTicket.html?one=one");
            } else if (item.id == 2) {
              // mui.toast("暂未开放！", { duration: "long", type: "div" });
              $(location).attr("href", "WorkTicket.html?two=two");
            } else if (item.id == 3) {
              // mui.toast("暂未开放！", { duration: "long", type: "div" });
              $(location).attr("href", "WorkTicket.html?three=three");
            } else {
              // mui.toast("暂未开放！", { duration: "long", type: "div" });
              $(location).attr("href", "recognitionResult.html");
            }
          },

          // 判断安卓还是ios
          compatibleInput() {
            //获取浏览器的userAgent,并转化为小写
            var ua = navigator.userAgent.toLowerCase();
            //判断是否是苹果手机，是则是true
            var isIos = ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1;
            if (isIos) {
              this.isflageIOX = true;
            } else {
              this.isflageIOX = false;
            }
          },
          abc(data) {
            if (!data) {
              return;
            }
            let blob = new Blob([data]); //创建blob方法
            let fileName = "excel.xls"; //下载名称
            if ("download" in document.createElement("a")) {
              // 不是IE浏览器
              // 简单的理解一下就是将一个file或Blob类型的对象转为UTF-16的字符串，并保存在当前操作的document
              let url = window.URL.createObjectURL(blob);
              let link = document.createElement("a"); //创建a标签
              link.style.display = "none"; //隐藏a标签
              link.href = url; //指定下载url
              link.setAttribute("download", fileName); //指定下载文件名称
              document.body.appendChild(link);
              link.click(); //触发下载事件
              document.body.removeChild(link); // 下载完成移除元素
              window.URL.revokeObjectURL(url); // 释放掉blob对象
            } else {
              // IE 10+
              window.navigator.msSaveBlob(blob, fileName);
            }
          },
        },
      });
    </script>
  </body>
</html>
